<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据上传 - 航班乘客付费选座预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-3xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">数据上传</h1>
            <p class="text-gray-600 mt-2">上传新的乘客数据以更新模型</p>
        </header>

        <nav class="bg-white rounded-lg shadow-md p-4 mb-8">
            <ul class="flex flex-wrap gap-4 justify-center">
                <li><a href="/" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="/visualizations" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-bar-chart mr-1"></i>数据分析</a></li>
                <li><a href="/upload" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-upload mr-1"></i>数据上传</a></li>
                <li><a href="/model-history" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-history mr-1"></i>模型历史</a></li>
            </ul>
        </nav>

        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-gray-700">
                <i class="fa fa-file-text-o mr-2"></i>上传乘客数据
            </h2>

            <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
                <h3 class="font-medium text-blue-800 mb-2">数据格式要求</h3>
                <ul class="list-disc pl-5 text-blue-700 space-y-1 text-sm">
                    <li>文件格式必须为CSV</li>
                    <li>必须包含以下列：age, gender, travel_purpose, booking_window, flight_duration, cabin_class, frequent_flyer, baggage, meal_preference, flight_time, paid_seat</li>
                    <li>确保数据格式与系统要求一致</li>
                </ul>
            </div>

            <form id="uploadForm" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-gray-700 mb-1" for="file">选择CSV文件</label>
                    <input type="file" id="file" name="file" accept=".csv" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md">
                </div>

                <div>
                    <label class="flex items-center">
                        <input type="checkbox" name="immediate_process" value="true" 
                            class="form-checkbox h-5 w-5 text-blue-600">
                        <span class="ml-2 text-gray-700">立即处理并更新模型（可能需要较长时间）</span>
                    </label>
                </div>

                <button type="submit" 
                    class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">
                    <i class="fa fa-upload mr-1"></i>上传数据
                </button>
            </form>

            <div id="result" class="mt-6 hidden">
                <div id="successResult" class="hidden bg-green-50 border border-green-200 text-green-700 p-3"></div>
                <div id="errorResult" class="hidden bg-red-50 border border-red-200 text-red-700 p-3"></div>
            </div>

            <div id="loading" class="hidden text-center py-8">
                <i class="fa fa-circle-o-notch fa-spin text-2xl text-blue-500"></i>
                <p class="mt-2 text-gray-600">正在上传和处理数据...</p>
            </div>
        </div>

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>航班乘客付费选座预测系统 &copy; 2023</p>
        </footer>
    </div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const resultDiv = document.getElementById('result');
            const successResult = document.getElementById('successResult');
            const errorResult = document.getElementById('errorResult');
            const loadingDiv = document.getElementById('loading');
            const submitBtn = this.querySelector('button[type="submit"]');

            // 显示加载状态
            resultDiv.classList.remove('hidden');
            successResult.classList.add('hidden');
            errorResult.classList.add('hidden');
            loadingDiv.classList.remove('hidden');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-circle-o-notch fa-spin mr-1"></i>处理中...';

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                loadingDiv.classList.add('hidden');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fa fa-upload mr-1"></i>上传数据';

                if (data.success) {
                    successResult.classList.remove('hidden');
                    successResult.textContent = data.message;
                    // 重置表单
                    this.reset();
                } else {
                    errorResult.classList.remove('hidden');
                    errorResult.textContent = `错误：${data.error}`;
                }
            })
            .catch(error => {
                loadingDiv.classList.add('hidden');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fa fa-upload mr-1"></i>上传数据';
                errorResult.classList.remove('hidden');
                errorResult.textContent = `请求失败：${error.message}`;
            });
        });
    </script>
</body>
</html>